<style lang="scss" scoped>
* {
    font-size: 0.9rem;
}
.ForgotPassword {
    width: 100vw;
    height: 100vh;
    background: url("../../static/images/login/login_bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.scroll-Y {
    position: relative;
    height: 100vh;
}
.top_logo {
    position: absolute;
    bottom: 70vh;
    left: 0;
    width: 100%;
    text-align: center;
    overflow: hidden;
    .top_img1 {
        margin-top: 2rem;
        image {
            width: 6rem;
        }
    }
    .top_img2 {
        image {
            width: 8rem;
        }
    }
    .top_img3 {
        image {
            width: 12rem;
        }
    }
}
.section_form {
    position: absolute;
    bottom: 15vh;
    left: 0;
    width: 100%;
    padding: 0 2rem;
    .title {
        font-size: 1rem;
        font-weight: bold;
        color: #000;
        margin-bottom: 1rem;
    }
    .u-form {
        .u-form-item {
            background-color: #fff;
            border: none;
            border-radius: 0.5rem;
            padding: 0.5rem 1.5rem;
            margin-bottom: 0.5rem;
            .getCode {
                color: #f99451;
            }
        }
    }
    .button {
        background: linear-gradient(90deg, #fa9553 0%, #fa7563 100%);
        color: #fff;
        margin-top: 2rem;
        border-radius: 2rem;
    }
    .button_P {
        text-align: center;
        margin-top: 1rem;
        color: #c6bdba;
    }
}
</style>

<template>
    <view class="ForgotPassword">
        <scroll-view scroll-y="true" class="scroll-Y">
            <view class="top_logo">
                <view class="top_img1">
                    <image src="../../static/images/login/top_img1.png" mode="widthFix" />
                </view>
                <view class="top_img2">
                    <image src="../../static/images/login/top_img2.png" mode="widthFix" />
                </view>
                <view class="top_img3">
                    <image src="../../static/images/login/top_img3.png" mode="widthFix" />
                </view>
            </view>
            <view class="section_form">
                <view class="title">忘记密码</view>
                <u-form :model="formData" ref="uForm">
                    <u-form-item label="" right-icon="account-fill">
                        <u-input maxlength="11" v-model="formData.account" placeholder="手机号码" :clearable="true" />
                    </u-form-item>
                    <u-form-item label="">
                        <u-input maxlength="11" v-model="formData.account" placeholder="验证码" :clearable="true" />
                        <u-toast ref="uToast"></u-toast>
                        <u-verification-code :seconds="60" ref="uCodeRef" @change="codeChange" start-text="获取验证码"></u-verification-code>
                        <view slot="right" class="getCode" @tap="getCode">
                            {{ state.verificationText }}
                        </view>
                    </u-form-item>
                    <u-form-item label="">
                        <u-input v-model="formData.password" placeholder="设置新密码" type="password" :clearable="true" :border-bottom="false" />
                    </u-form-item>
                    <u-form-item label="">
                        <u-input v-model="formData.password" placeholder="确认新密码" type="password" :clearable="true" :border-bottom="false" />
                    </u-form-item>
                </u-form>
                <u-button class="button" round :ripple="true" :hair-line="false" ripple-bg-color="#fa8c76">
                    确定
                </u-button>
                <view class="button_P" @click="gologin">返回登录</view>
            </view>
        </scroll-view>
    </view>
</template>

<script setup lang="ts">
import { reactive, ref, shallowRef } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
const uCodeRef = shallowRef();
const formData = reactive<{
    account: string;
    password: string;
}>({
    account: "",
    password: "",
});
const isCheckAgreement = ref(false);
const state = reactive<{
    verificationText: string;
}>({
    verificationText: "获取验证码",
});
onLoad(() => {
    console.log("onLoad");
});
onShow(() => {
    console.log("onShow");
});
// 返回登录
const gologin = () => {
    uni.navigateBack();
};
// 获取验证码
const getCode = () => {
    // 校验手机号
    if (!formData.account) return uni.$u.toast("请输入手机号");
    if (uCodeRef.value?.canGetCode) {
        uCodeRef.value.start();
    } else {
        uni.$u.toast("倒计时结束后再试试");
    }
};
// 验证码倒计时
const codeChange = (value: string) => {
    state.verificationText = value;
};
</script>
